<template>
    <el-menu-item :index="item ? item.url : ''" v-if="!item || !item.children || item.children.length === 0">
        <el-icon>
            <component :is="item.icon" />
        </el-icon>
        <template #title>{{ item?.menuName }}</template>
    </el-menu-item>

    <el-sub-menu :index="item ? item.id : ''" v-else>
        <template #title>
            <el-icon>
                <component :is="item.icon" />
            </el-icon>
            <span class="tab">{{ item?.menuName }}</span>
        </template>

        <div v-for="(child, index) in item?.children" :key="index">
            <template v-if="child.children && child.children.length > 0">
                <Menuitem :key="child.id" :item="child" />
            </template>
            <el-menu-item v-else :index="child.url">
                <el-icon>
                    <component :is="child.icon" />
                </el-icon>
                <span class="tab sub">{{ child.menuName }}</span>
            </el-menu-item>
        </div>
    </el-sub-menu>
</template>

<script setup>
import { onMounted, toRefs } from 'vue';


const props = defineProps({
    item: {
        type: Object
    },
});

const { item } = toRefs(props);

onMounted(() => {
    // console.log(props.item, "传入的数据")
})
</script>

<style lang="scss">
</style>